<template>
  <div class="promotion-page">
    <MainHeader />
    <div class="promotion-container">
      <SideMenu />
      <div class="promotion-content">
        <div class="content-header">
          <h1>{{ t('personalCenter.promotionRebate') }}</h1>
          <p class="header-desc">{{ t('personalCenter.promotionSystemDesc') }}</p>
        </div>

        <div class="profile-settings-container">
          <!-- 左侧导航 -->
          <div class="profile-settings-nav">
            <div
                class="nav-item"
                :class="{ 'active': promotionTab === 'promotionSystem' }"
                @click="promotionTab = 'promotionSystem'"
            >
              <el-icon>
                <Promotion/>
              </el-icon>
              <span>{{ t('personalCenter.promotionRebate') }}</span>
            </div>
            <div
                class="nav-item"
                :class="{ 'active': promotionTab === 'customerService' }"
                @click="promotionTab = 'customerService'"
            >
              <el-icon>
                <Service/>
              </el-icon>
              <span>{{ t('personalCenter.customerService') }}</span>
            </div>
          </div>

          <!-- 右侧内容区 -->
          <div class="profile-settings-content">
            <!-- 推广系统内容 -->
            <div v-if="promotionTab === 'promotionSystem'" class="settings-panel">
              <div class="panel-header">
                <h3>{{ t('personalCenter.promotionSystem') }}</h3>
                <p class="panel-desc">{{ t('personalCenter.promotionSystemDesc') }}</p>
              </div>

              <el-card class="profile-card" shadow="hover">
                <!-- 推广系统部分 -->
                <div class="promotion-info">
                  <div class="promotion-description">
                    <p>{{ t('personalCenter.promotionShareDesc') }}</p>
                  </div>

                  <div class="promotion-link-box">
                    <div class="link-header">{{ t('personalCenter.promotionLink') }}</div>
                    <div class="link-content">
                      <el-input
                          v-model="promotionLink"
                          readonly
                          class="promotion-input"
                      >
                        <template #append>
                          <el-button @click="copyPromotionLink">{{ t('personalCenter.copy') }}</el-button>
                        </template>
                      </el-input>
                    </div>
                  </div>
                </div>
              </el-card>
            </div>

            <!-- 专属客服内容 -->
            <div v-if="promotionTab === 'customerService'" class="settings-panel">
              <div class="panel-header">
                <h3>{{ t('personalCenter.customerService') }}</h3>
                <p class="panel-desc">{{ t('personalCenter.scanQrcode') }}</p>
              </div>

              <el-card class="profile-card" shadow="hover" v-loading="customerServiceLoading">
                <div class="service-container">
                  <div v-if="customerServiceInfo" class="qrcode-container">
                    <el-image :src="customerServiceInfo.qrcodeUrl" :alt="t('personalCenter.customerService')" class="customer-qrcode"
                              :preview-src-list="[customerServiceInfo.qrcodeUrl]" fit="scale-down">
                    </el-image>
                    <p class="qrcode-hint">{{ t('personalCenter.wechatId') }}: {{
                        customerServiceInfo.wechatId
                      }}</p>
                    <div class="service-desc" v-if="customerServiceInfo.description">
                      <div v-html="customerServiceInfo.description"></div>
                    </div>
                  </div>
                  <div v-else class="empty-service">
                    <el-empty :description="t('personalCenter.noCustomerService')"/>
                  </div>
                </div>
              </el-card>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, nextTick, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Promotion, Service } from '@element-plus/icons-vue'
import { getCurrentLanguage, t } from '@/utils/i18n'
import MainHeader from '@/components/MainHeader.vue'
import SideMenu from '@/components/SideMenu.vue'
import { getCustomerServiceInfo } from '@/api/customerService'

// 推广相关变量
const promotionTab = ref('promotionSystem')
const promotionLink = ref('https://tg.shuhailinghang.cn/')
const customerServiceInfo = ref(null)
const customerServiceLoading = ref(false)

// 复制推广链接
const copyPromotionLink = () => {
  const input = document.createElement('input')
  input.value = promotionLink.value
  document.body.appendChild(input)
  input.select()
  document.execCommand('copy')
  document.body.removeChild(input)
  if (getCurrentLanguage() === 'zh') {
    ElMessage.success('推广链接已复制到剪贴板')
  } else {
    ElMessage.success('Promotion link has been copied to clipboard')
  }
}

// 获取客服信息
const fetchCustomerServiceInfo = async () => {
  customerServiceLoading.value = true
  try {
    const res = await getCustomerServiceInfo()
    if (res && res.code === 200) {
      customerServiceInfo.value = res.data
    } else {
      // 使用模拟数据
      customerServiceInfo.value = {
        qrcodeUrl: 'https://via.placeholder.com/200',
        wechatId: 'service_wechat_id',
        description: '<p>扫描二维码添加客服微信，获得专业支持</p>'
      }
    }
  } catch (error) {
    // 使用模拟数据
    customerServiceInfo.value = {
      qrcodeUrl: 'https://via.placeholder.com/200',
      wechatId: 'service_wechat_id',
      description: '<p>扫描二维码添加客服微信，获得专业支持</p>'
    }
  } finally {
    customerServiceLoading.value = false
  }
}

// 监听标签页变化
watch(promotionTab, (newTab) => {
  if (newTab === 'customerService') {
    // 加载客服相关数据
    fetchCustomerServiceInfo()
  }
})

// 页面挂载时加载数据
onMounted(() => {
  promotionTab.value = 'promotionSystem'
})
</script>

<style scoped>
.promotion-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f7fa;
}

.promotion-container {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.promotion-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.content-header {
  margin-bottom: 30px;
}

.content-header h1 {
  font-size: 28px;
  font-weight: bold;
  margin: 0 0 10px 0;
  color: #333;
}

.header-desc {
  font-size: 14px;
  color: #909399;
  margin: 0;
}

.profile-settings-container {
  display: flex;
  gap: 20px;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.profile-settings-nav {
  width: 200px;
  border-right: 1px solid #e6e6e6;
  padding: 20px 0;
  flex-shrink: 0;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  cursor: pointer;
  transition: all 0.3s;
  color: #606266;
  font-size: 14px;
}

.nav-item:hover {
  background-color: #f5f7fa;
  color: #409EFF;
}

.nav-item.active {
  background-color: #ecf5ff;
  color: #409EFF;
  border-left: 3px solid #409EFF;
  padding-left: 17px;
}

.profile-settings-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.settings-panel {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.panel-header {
  margin-bottom: 20px;
}

.panel-header h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 8px 0;
  color: #333;
}

.panel-desc {
  font-size: 14px;
  color: #909399;
  margin: 0;
}

.profile-card {
  margin-bottom: 20px;
}

.promotion-info {
  padding: 20px 0;
}

.promotion-description {
  background-color: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
  border-left: 3px solid #409EFF;
}

.promotion-description p {
  margin: 0;
  font-size: 15px;
  color: #606266;
  line-height: 1.6;
}

.promotion-link-box {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #e6e6e6;
}

.link-header {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
}

.link-content {
  display: flex;
}

.promotion-input {
  width: 100%;
}

.service-container {
  padding: 20px 0;
}

.qrcode-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.customer-qrcode {
  width: 200px;
  height: 200px;
  margin-bottom: 15px;
  border-radius: 8px;
  border: 1px solid #e6e6e6;
}

.qrcode-hint {
  font-size: 14px;
  color: #606266;
  margin: 10px 0;
}

.service-desc {
  margin-top: 15px;
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
}

.empty-service {
  padding: 40px 20px;
}
</style>

